<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Calculator!</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div id="calculator">
            <h1>Calculator</h1>
            <div id="display-container">
                <p id="display"> </p>
                <p id="display2"> </p>
            </div>
            <div id="buttons-container">
                <div class="button" id="button-clear" data-value="ac">
                    <span>A/C</span>
                </div>
                <div class="button" id="button-sign" data-value="sign">
                    <span>+/-</span>
                </div>
                <div class="button" id="button-percent" data-value="%">
                    <span>%</span>
                </div>
                <div class="button red" id="button-divide" data-value="/">
                    <span>/</span>
                </div>
                <div class="button" id="button-seven" data-value="7">
                    <span>7</span>
                </div>
                <div class="button" id="button-eight" data-value="8">
                    <span>8</span>
                </div>
                <div class="button" id="button-nine" data-value="9">
                    <span>9</span>
                </div>
                <div class="button red" id="button-multiply" data-value="*">
                    <span>*</span>
                </div>
                <div class="button" id="button-four" data-value="4">
                    <span>4</span>
                </div>
                <div class="button" id="button-five" data-value="5">
                    <span>5</span>
                </div>
                <div class="button" id="button-six" data-value="6">
                    <span>6</span>
                </div>
                <div class="button red" id="button-minus" data-value="-">
                    <span>-</span>
                </div>
                <div class="button" id="button-one" data-value="1">
                    <span>1</span>
                </div>
                <div class="button" id="button-two" data-value="2">
                    <span>2</span>
                </div>
                <div class="button" id="button-three" data-value="3">
                    <span>3</span>
                </div>
                <div class="button red" id="button-plus" data-value="+">
                    <span>+</span>
                </div>
                <div class="button" id="button-zero" data-value="0">
                    <span>0</span>
                </div>
                <div class="button" id="button-decimal" data-value=".">
                    <span>.</span>
                </div>
                <div class="button red" id="button-equals" data-value="=">
                    <span>=</span>
                </div>
            </div>
        </div>
    </body>

    <script src="script.js"></script>
</html>